<template>
	<view class="container">
		
		<view class="title">
		  <view class="font-36 text-bold c-base">设备管理</view>
		  <view class="font-24 c-base">智能设备添加、管理功能</view>
		  <image :src="$util.img('image/health/equipment_1.png')" mode="" class="icon"></image>
		</view>
		
		<view class="boxPanel rel m-b-24" 
			v-for="(item,index) in myDeviceList" :key="index"
			:style="index==0?'margin-top:-40rpx':''"
		>
			<view class="color-title2 m-b-20 bggreen">
				{{item.address}}
			</view>
			<view class="flex-warp ">
				<view class="items" v-for="(deviceItem,deviceIndex) in item.device" :key="deviceIndex" @click="goEquipmentDetail(deviceItem)">
					<image :src="$util.img(deviceItem.logo_img)" mode="" class="miimg" lazy-load></image>
					<view class="font-30 text-bold">{{deviceItem.name}}</view>
					<view class="c-78 m-b-20">{{deviceItem.mac_code}}</view>
					<view class="flex-between">
						<u-switch v-model="deviceItem.online_status" disabled size="14" activeColor="#ff8f33"></u-switch>
						<text class="color-title2">{{deviceItem.online_status==1?'在线':'离线'}}</text>
					</view>
				</view>
			</view> 
		</view>
		
		<!-- 悬浮购物车 -->
		<view class="cartBox" @click="$util.redirectTo('/otherpages/health/addEquipment')">
		  <image :src="$util.img('/image/health/add.png')" mode=""></image>
		</view>
		
	</view>
</template>

<script>

	// 备注设备类型：
	// 1.智能手表  id=8
	// 2.紧急按钮  id=9
	// 3.sos 双向通话  id=10
	// 4.拉绳报警  id=11
	// 5.生命体征  id=12
	// 6.摔倒探测器  id=13
	// 7.胸卡  id=14

	export default {
		data() {
			return {
				value: true,
				locationList: [],
				myDeviceList: [],
				locationInfo: {
					id: 0,
					name: ''
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getMyDeviceList();
		},
		methods: {
			goEquipmentDetail(item) {
				if(item.device_id == 8) {
					this.$util.redirectTo('/otherpages/health/equipmentDetail?id='+item.id)
				}else if(item.device_id == 14) {
					this.$util.redirectTo('/otherpages/health/cardEquipmentDetail?id='+item.id)
				}else {
					this.$util.redirectTo('/otherpages/health/lifeEquipmentDetail?id='+item.id)
				}
				
			},
			getLocation() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceLocation",
			      data: {
					search: '',
				  },
			      success: res => {
			        if(res.code == 0) {
						this.locationList = res.data;
						if(this.locationList.length > 0) {
							this.locationInfo = this.locationList[0];
							this.getMyDeviceList();
						}
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			getMyDeviceList() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getUserDeviceList",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.myDeviceList = res.data;
						// 循环遍历数据，将在线状态转为布尔值
						for(let i = 0; i < this.myDeviceList.length; i++) {
							for(let j = 0; j < this.myDeviceList[i].device.length; j++) {
								if(this.myDeviceList[i].device[j].online_status == 1) {
									this.myDeviceList[i].device[j].online_status = true;
								}else {
									this.myDeviceList[i].device[j].online_status = false;
								}
							}
						}

			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
// 顶部
.title {
  position: relative;
  padding: 0 24rpx 80rpx;
  background: $color-title2;
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 304rpx;
    height: 256rpx;
  }
}
.bggreen {
	background: #EBFBF4;
	border-radius: 20rpx;
	padding: 18rpx 20rpx;
}
.items {
	background: #F7F7F7;
	border-radius: 20rpx;
	width: 314rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-right: 14rpx;
	margin-bottom: 24rpx;
	&:nth-child(2n) {
		margin-right: 0;
	}
	.miimg {
		width: 92rpx;
		height: 92rpx;
		background: #fff;
		border-radius: 10rpx;
	}
}
.active {
	border: 1px solid $color-title2;
}
.cartBox {
  position: fixed;
  bottom: 10%;
  right: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 78rpx;
  background: #FFF;
  z-index: 9;
  image {
    width: 96rpx;
    height: 96rpx;
  }
}
</style>
